<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <!--  -->
      <GoodThead />
      <!--  -->
      <GoodTbody 
      v-for="(item, index) in goodList" 
      :key="index" 
      :item="item" 
      :index="index"
      />
      <!--  -->
      <GoodFoot />
    </table>
  </div>
</template>

<script>
import GoodFoot from './components/GoodFoot.vue'
import GoodTbody from './components/GoodTbody.vue'
import GoodThead from './components/GoodThead.vue'
import { mapState } from 'vuex'
export default {
  components: {
    GoodFoot,
    GoodTbody,
    GoodThead,
  },
  computed: {
    ...mapState(['goodList']),
  },
}
</script>

<style></style>
